<template>
  <div class="date-toggle-content">
    <div class="date-tab-list">
      <div class="date-li"
         v-for="(item,index) in calendarArr"
         :class="{active: item.flag}"
         @click="changeCalendar(index)">
        <p class="item-week">{{ item.week }}</p>
        <p class="item-day">{{ item.day }}</p>
      </div>
    </div>
    <div class="date-icon" @click="selectCalendar"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'date-togglt-tab',
    props: {
      calendarArr: {
        type: Array,
        default: function () {
          return []
        }
      },
      calendarActive: {
        type: String,
        default: ''
      }
    },
    methods: {
      selectCalendar() {
        this.$emit('selectCalendar');
      },
      changeCalendar(index) {
        this.$emit('changeCalendar', index)
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .date-toggle-content {
    padding: 0 .25rem;
    display: flex;
    width: 100%;
    height: 3rem;
    align-items: center;
    box-sizing: border-box;
    background-color: #46a1bb;
    .date-tab-list {
      display: flex;
      flex:  0 0 90%;
      height: 2rem;
      justify-content: center;
      align-items: center;
      .date-li {
        line-height: 1;
        padding: .25rem 0;
        flex: 1;
        color: #fff;
        text-align: center;
        .item-week {
          line-height: 1;
          padding-bottom: .25rem;
        }
      }
      .active {
        border: none;
        color: #fff;
        border-radius: .5rem;
        background-color: rgba(255, 255, 255, .3);
      }
    }
    .date-icon {
      flex:  0 0 10%;
      height: 2rem;
      color: #3e3a39;
      background: url("../assets/images/calendar.png") no-repeat center center;
      background-size: 1.05rem 1.15rem;
    }
  }
</style>
